<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>图标添加页面</title>
<link href="<%=request.getContextPath()%>/css/Default.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/redmond/jquery-ui-1.8.14.custom.css"
	rel="stylesheet" type="text/css"></link>
<link href="<%=request.getContextPath()%>/css/Dialog.css"
	rel="stylesheet" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="<%=request.getContextPath()%>/scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/HRM.js" type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.8.14.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery.validate.min.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery.validate.message_cn.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/Dialog.js"
	type="text/javascript"></script>
</head>
<body class="dialogBody">

<script type="text/javascript">
function beforeFormSubmitFunc(){
	if(!$("#iconEditForm").valid()){
		createAlertDialog('提示信息','还有未正确填写的项，请参照提示修改!');
		return false;
	}else{
		return true;
	}
}
$().ready(function(){
	$("#iconEditForm").validate({
		rules:{
			title:{
				required:true,
				maxlength:50
			},
			imgFile:{
				accept:true
			},
			path:{
				required:true,
				maxlength:50
			}
		},
		errorPlacement:function(error,element){
			createTooltip(error,element);
		},
		success:function(error,element){
			sucRemoveTooltip(error);
		},
		event:'blur'|'keyup'|'focus'|'keydown'
	});
	$('#iconEditForm').find("input").focus(function(){
		$(this).valid();
	});
	$('#iconEditForm').find("input").blur(function(){
		$('#'+$(this).attr('id')+'Error').remove();
	});
	$('#iconEditForm').find('#actionName').focus();
	$("#iconImg").die('click').live('click',function(){
		var path='<%=request.getContextPath()%>/icon.do?method=getAllParentIcons';
		$.getJSON(path,function(data,status,xhr){
			$("#iconDiv").html("");
			var iconULHtml = "<ul style='margin-top:10px;'>";
			data=data[0];
			for(var i=0;i<data.length;i++){
				iconULHtml+="<li style='float:left;background:#F7F7F7;'>";
				iconULHtml+="<img class ='iconList' style='margin-left:10px;cursor:pointer;width:20px;height:20px;border:1px solid #cccccc;' title='点击选中图标' src='<%=request.getContextPath()%>/"+data[i]['path']+"' iconId='"+data[i]['id']+"' name='"+data[i]['path']+"'/>";
				iconULHtml+="</li>";
			}
			iconULHtml += "</ul>";
			$(iconULHtml).appendTo($("#iconDiv"));
			$("#iconDiv").css({width:$("body").width(),height:$("body").height(),"z-index":1000,"position":"absolute","top":0,"left":0,"margin":0,"padding":0}).show();
			$(".iconList").unbind('click').bind('click',function(){
				var src=$(this).attr('src');
				var path=$(this).attr('name');
				var id=$(this).attr('iconId');
				$("#iconDiv").hide();
				$("#iconImg").attr('src',src);
				$("#icon").val(id);
			});
		});
	});
	$("#Level_1").click(function(){
		$("#parentIconTr").show();
	});
	$("#Level_0").click(function(){
		$("#parentIconTr").hide();
	});
});
</script>
<form id="iconEditForm" action='<%=request.getContextPath()%>/icon.do?method=updateIconById' method="post" enctype="multipart/form-data" >
<center>
<table width="100%" align="center" cellpadding="2" cellspacing="0">
    <tr>
      <td height="10"></td>
      <td><input name="id" type="hidden" value='<c:out value="${icon.id}" />'
									id="id" /></td>
    </tr>
    <tr>
      <td>
   <fieldset>
    <legend><label>图标信息</label></legend>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="39%" height="30" align="right" >图标标签：</td>
          <td width="61%"><input name="title" value='<c:out value="${icon.title}" />' type="text" id="title" /><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >图标名称：</td>
          <!-- JSTL格式化字符串 使用的是java表达式 http://apps.hi.baidu.com/share/detail/6033011  -->
          <td><input name="path" type="text" value='${fn:split(icon.path, "/")[2]}' id="path"/><span class='requiredSpan'>*</span></td>
        </tr>
        <tr>
          <td height="30" align="right" >图标预览：</td>
          <td><img  width='20' height='20' src='<%=request.getContextPath()%>/<c:out value="${icon.path}" />'></td>
        </tr>
       <c:if test="${icon.parentId==-1}">
        <tr>
          <td height="30" align="right" >图标级别：</td>
          <td >
           <input type='radio' name='level' id='Level_0' value='-1' checked><label for='Level_0'>一级</label><input type='radio' name='level' id='Level_1' value='1'><label for='Level_1'>二级</label>
          </td>
        </tr>
        <tr id="parentIconTr" style='display:none;'>
          <td height="30" align="right" >父级图标：</td>
          <td><input name="icon" type="hidden" value='1806'
									id="icon" />
			<img src='<%=request.getContextPath()%>/images/icons/icon022a4.gif' id="iconImg" style="cursor:pointer;width:20px;height:20px;"> (点击图标更换)</td>
        </tr>
        </c:if>
       <c:if test="${icon.parentId!=-1}">
        <tr>
          <td height="30" align="right" >图标级别：</td>
          <td >
           <input type='radio' name='level' id='Level_0' value='-1'><label for='Level_0'>一级</label><input type='radio' name='level' id='Level_1' value='1' checked><label for='Level_1'>二级</label>
          </td>
        </tr>
        <tr id="parentIconTr">
          <td height="30" align="right" >父级图标：</td>
          <td><input name="icon" type="hidden" value='<c:out value="${icon.parentIcon.id}" />'
									id="icon" />
			<img src='<%=request.getContextPath()%>/<c:out value="${icon.parentIcon.path}" />' id="iconImg" style="cursor:pointer;width:20px;height:20px;"> (点击图标更换)</td>
        </tr>
        </c:if>
        <tr>
          <td height="30" align="right" >替换图标：</td>
          <td><input name="imgFile"  type="file"  id="imgFile" /></td>
        </tr>
      </table>
      </fieldset>
      </td>
    </tr>
	</table>
	</center>
</form>
<div style="display:none;background:#ffffff;" id="iconDiv">
</div>
</body>
</html>